<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount } from 'vue';

onMounted(() => {
    // 创建图形
    var chartDom = document.getElementById('graph');
    var myChart = echarts.init(chartDom);
    var option;

    // 图形配置编辑
  option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['测评', '心理练习', '呼吸训练', '社群互助', '心情打卡', '解压游戏', 'AI咨询', '冥想练习'],
      icon: 'circle',
      bottom: '0px',
      left: '26px',
      right: '26px'
    },
    color: ['#3591ef', '#885efb', '#00d6d6', '#e16882', '#fa8024', '#885efb', '#00d6d6', '#da4767'],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '28%',
      top: '15px',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: ['20%', '10%'],
      data: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月' ],
    },
    yAxis: {
      type: 'value',
      // interval: 2000,
      // splitNumber: 3,
      splitLine: {
        show: true, // 确保显示水平网格线
        lineStyle: {
          type: 'dashed', // 设置为虚线
          color: 'rgba(0, 0, 0, 0.2)' // 可选：设置颜色
        }
      },
    },
    series: [
      {
        name: '测评',
        type: 'line',
        smooth: true,
        showSymbol: false,
        // stack: 'Total',
        data: [124, 132, 2254, 247, 1412, 225, 217, 356, 1584, 2451],
      },
      {
        name: '心理练习',
        type: 'line',
        smooth: true,
        showSymbol: false,
        // stack: 'Total',
        data: [227, 182, 2545, 234, 985, 331, 315, 524, 1457, 1547]
      },
      {
        name: '呼吸训练',
        type: 'line',
        smooth: true,
        showSymbol: false,
        // stack: 'Total',
        data: [151, 232, 2514, 154, 1145, 337, 412, 457, 1247, 2145 ]
      },
      {
        name: '社群互助',
        type: 'line',
        smooth: true,
        showSymbol: false,
        // stack: 'Total',
        data: [324, 332, 1458, 334, 689, 335, 322, 745, 1154, 2531 ]
      },
      {
        name: '心情打卡',
        type: 'line',
        smooth: true,
        showSymbol: false,
        // stack: 'Total',
        data: [824, 932, 3111, 934, 1291, 1331, 1324, 748, 1549, 1589 ]
      },
      {
        name: '解压游戏',
        type: 'line',
        smooth: true,
        showSymbol: false,
        // stack: 'Total',
        data: [827, 932, 2985, 934, 1295, 1337, 1325, 457, 1458, 2547 ]
      },
      {
        name: 'AI咨询',
        type: 'line',
        smooth: true,
        showSymbol: false,
        // stack: 'Total',
        data: [824, 932, 1586, 934, 1295, 1332, 1327, 745, 1498, 2104 ]
      },
      {
        name: '冥想练习',
        type: 'line',
        smooth: true,
        showSymbol: false,
        // stack: 'Total',
        data: [824, 932, 3204, 934, 1297, 1332, 1324, 457, 997, 1985]
      }
    ]
  };
     // 设置图形配置
    option && myChart.setOption(option);

    // 监听窗口 resize 事件
    const handleResize = () => {
        myChart?.resize();
    };

    // 添加窗口变化的监听事件
    window.addEventListener('resize', handleResize);

    // 组件卸载前移除监听，防止内存泄漏
    onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize);
        // 销毁图表实例
        myChart?.dispose();
    });
})
</script>

<template>
<div class="box">
    <div class="title"><img src="@/assets/images/home/首页各个功能标题前图标.png" alt="" width="22px" height="22px" style="margin-right: 10px">用户端功能使用情况</div>
    <div class="graph-box">
        <div class="graph-title">单位：人数</div>
        <div class="graph-box-bottom" id="graph"></div>
    </div>
</div>
</template>

<style scoped>
.box {
    width: 1200px;
    height: 530px;
    margin: 0 auto;
    margin-top: 54px;
    /* background-color: pink; */
}
.title {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding-left: 30px;
  padding-bottom: 30px;
}
.graph-box {
    height: 476px;
    background-color: white;

}
.graph-title {
    padding: 20px 0px 15px 20px;
    font-size: 14px;
    color: rgba(0, 0, 0, .5)
}
.graph-box-bottom {
    height: 421px;
    /* background-color: red; */
}
</style>
